<template>
	<view class="page-body">
		
		<cu-custom bgColor="bg-white" :isBack="true" :isTitle="false">
			<block slot="backText" class="titilestyle">{{title}}</block>
		</cu-custom>
		<view class="coupon-box">

			<view class="coupon-tab1 bg-white">
				<view class="orderType-box1">
					<view class='ordertype ' v-for="(tab,index) in ordertype" @click="changeTab(index)">

						<text :class="tabIndex==index?'order-tap-select':'order-tab-no'"> {{tab.name}}</text>
						<view class="orderline animation-slide-left" v-show="tabIndex==index">

						</view>

					</view>


				</view>

			</view>

			<view class="box" :style="[{height:swiperHeight+'px'}]">

				<mescroll-uni :fixed="false" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback"
					@init="mescrollInit">
					<view class="coupon-list">

						<view class="box-item  animation-fade" v-for="(item,index) in couponList" v-if="item.status==0"
							@click="checkCoupon(index)">
							<view class="left-item middle">
								<text class="text-price left-top">{{item.money|numFilter}}</text>
								<text class="left-bot">满{{item.condition|numFilter}}可用</text>

							</view>
							<view class="right-box">
								<text class="right-top">{{item.title}}</text>
								<text class="right-bottom">{{item.use_end_time}}</text>

							</view>
							<view class="right-check middle ">
								<text class="cu-btn nouse sm bg-blue round" @click="use">去使用</text>
								<!-- <text v-else-if="item.status==1" class="cu-btn used sm round">已使用</text>
								<text v-else-if="item.status==2" class="cu-btn lasted sm round">已过期</text> -->

							</view>
						</view>

						<view class="box-item  animation-fade" v-for="(item,index) in couponList" v-if="item.status==1"
							@click="checkCoupon(index)">
							<view class="left-item middle">
								<text class="text-price left-top graybold">{{item.money|numFilter}}</text>
								<text class="left-bot graybold">满{{item.condition|numFilter}}可用</text>

							</view>
							<view class="right-box">
								<text class="right-top graybold">{{item.title}}</text>
								<text class="right-bottom graybold">{{item.use_end_time}}</text>

							</view>
							<view class="right-tag middle used">
								已使用
							</view>


						</view>
						<view class="box-item  animation-fade" v-for="(item,index) in couponList" v-if="item.status==2"
							@click="checkCoupon(index)">
							<view class="left-item middle">
								<text class="text-price left-top graybold">{{item.money|numFilter}}</text>
								<text class="left-bot graybold">满{{item.condition|numFilter}}可用</text>

							</view>
							<view class="right-box">
								<text class="right-top graybold">{{item.title}}</text>
								<text class="right-bottom graybold">{{item.use_end_time}}</text>

							</view>
							<view class="right-tag middle lasted">
								已过期
							</view>


						</view>



					</view>
				</mescroll-uni>

			</view>

		</view>
	</view>
</template>
<script>
	import MescrollUni from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue"
	export default {
		components: {
			MescrollUni
		},
		data() {
			return {
				StatusBar: this.Custom,
				ordertype: [
					{
						name: "红包",
						type: 0,
						status:0

					},
					{
						name: "店铺红包",
						type: 1,
						status:0,

					},
					{
						name: "历史记录",
						type: "all",
						status:[1,2]
					}
				],
				title: "红包卡卷",
				mescroll: null,
				// 下拉刷新的常用配置
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: '-- 没有更多了 --'
				},
				userInfo: [],
				tabIndex: 0,
				couponList: [],
				type: 0,
				status:0,
				swiperHeight: '',
				index1: -1,
			}
		},
		filters: {
			numFilter(value) {
				return parseFloat(value)
			}
		},
		onLoad() {

		},
		mounted() {
			this.getInfo().then((e) => {
				
				this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height) - 50;
				
			});
			
			//this.swiperHeight = this.WH - (this.StatusBar.top + this.StatusBar.height);
		},
		methods: {
			use() {
				uni.switchTab({
					url:"/pages/basic/basic"
				})
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback(mescroll) {
				mescroll.resetUpScroll();
			},
			upCallback(mescroll) {
				this.apiRequest('/buyer/couponList', {
					type: this.type,
					area_id: uni.getStorageSync('area_id'),
					page: mescroll.num,
					limit: mescroll.size,
					status: this.status
				}, 0).then(res => {
					if (res.code != 200) {
						mescroll.endSuccess()
					}
					if (mescroll.num == 1) {
						this.couponList = [];
					}
					if (this.tabIndex == 2) {
						let arr = [];
						for (let i in res.data.data) {
							if (res.data.data[i].status == 1 || res.data.data[i].status == 2) {
								arr.push(res.data.data[i]);
							}
						}
						res.data.dat = arr;
					}
					this.couponList = this.couponList.concat(res.data.data) //追加新数据
					mescroll.endByPage(this.couponList.length, res.data.totalPage)
				})
			},
			changeTab(i) {
				this.tabIndex = i
				this.couponList = [];
				this.type = this.ordertype[this.tabIndex].type;
				this.status=this.ordertype[this.tabIndex].status;
				this.mescroll.resetUpScroll();
			}
		}
	}
</script>

<style>
	.coupon-tab1 {
		width: 100%;
		height: 100upx;
		display: flex;
		flex-direction: row;
		align-items: center;

	}

	.orderType-box1 {
		width: 100%;
		height: 100%;
		display: -webkit-box;
		flex-direction: row;
	}

	.ordertype {
		margin-top: 30upx;
		/* width: 130upx; */
		height: 60upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 45upx;
	}

	.order-tap {
		width: 100vw;
		background-color: #FFFFFFFF;
	}

	.order-tap-select {
		font-size: 28upx;
		font-weight: 800;
		color: #333333;
	}

	.order-tab-no {
		font-size: 28upx;
		font-weight: 500;
		color: #999999;
	}

	.orderline {
		width: 30%;
		height: 6upx;
		background: #1270E0;
		border-radius: 30%;
		margin-top: 4upx;
	}

	.box-item {
		width: 98%;
		margin-left: 1%;
		height: 180upx;
		margin-top: 15upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		display: flex;
		flex-direction: row;
		overflow: hidden;
		position: relative;

	}

	.left-item {
		width: 25%;
		height: 90%;
		display: flex;
		flex-direction: column;
	}

	/* 	.left-item text{
		padding: 5upx 10upx;
	} */
	.left-top {
		font-size: 48upx;
		font-weight: 800;
		color: #DF3636;

	}

	.left-bot {
		font-size: 24upx;
		font-weight: 500;
		color: #999999;
	}

	.right-box {
		width: 58%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;

	}

	.right-box text {
		padding: 5upx 10upx;
	}

	.right-top {
		width: 96%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		font-size: 28upx;
		font-weight: 800;
		color: #333333;

	}

	.right-bottom {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		font-size: 24upx;
		font-weight: 500;
		color: #999999;
	}

	.right-check {
		width: 15%;
		height: 100%;
		overflow: hidden;

	}

	.graybold {
		font-weight: 800;
		color: #999999;
	}

	.right-tag {
		width: 32vw;
		height: 60upx;
		background: #DBDBDB;
		position: absolute;
		float: right;
		right: -50upx;
		transform: rotate(45deg);
		top: 30upx;
		font-size: 24upx;
		font-weight: 500;
		color: #999999;

	}
</style>
